import React from 'react';
import { Form, Icon, Input, DatePicker, Button, Select, Alert, Row, Col } from 'antd';
const { TextArea } = Input;
const { Option } = Select;

export default class Perform extends React.Component<any, any> {
  static defaultProps = {
    view: {},
  };
  handleSubmit = () => {
    const { close, view, submit } = this.props;
    this.props.form.validateFields((err: any, values: any) => {
      if (!err) {
        close && close();
        submit && submit(view, values);
      }
    });
  };

  render() {
    const { getFieldDecorator } = this.props.form;
    const { personData } = this.props;
    const formItemLayout = {
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
    };

    return (
      <Form {...formItemLayout} onSubmit={this.handleSubmit}>
        <Form.Item label={'工作人员:'}>
          {getFieldDecorator('staffId', {
            rules: [{ required: true, message: '请输入姓名' }],
          })(
            <Select
              showSearch
              placeholder="请输入工作人员"
              filterOption={false}
              onChange={() => {}}
            >
              {personData.length > 0
                ? personData.map((item: any) => (
                    <Option value={item.id}>
                      {item.name} （{item.phoneNumber}）
                    </Option>
                  ))
                : null}
            </Select>,
          )}
        </Form.Item>
        <Form.Item label={'费用类别:'}>
          {getFieldDecorator('typeCode', {
            rules: [{ required: true, message: '请选择费用类别' }],
          })(
            <Select placeholder="请选择费用类别">
              <Option value="LIFE">生活费</Option>
              <Option value="RECEPTION">接待费</Option>
            </Select>,
          )}
        </Form.Item>
        <Form.Item label={'支出费用:'}>
          {getFieldDecorator('cost', {
            rules: [{ required: true, message: '请输入支出费用' }],
          })(<Input type="number" placeholder="请输入支出费用" prefix="￥" suffix="RMB" />)}
        </Form.Item>
        {/* <Form.Item label={'unitName:'}>
          {getFieldDecorator('unitName', {
            rules: [{ required: true, message: '请输入姓名' }],
          })(<Input placeholder="请输入姓名" />)}
        </Form.Item> */}
        <Form.Item label={'支出时间'}>
          {getFieldDecorator('costTime', {
            rules: [{ required: true, message: '请选择支出时间' }],
          })(<DatePicker onChange={() => {}} />)}
        </Form.Item>
        <Form.Item label={'备注'}>{getFieldDecorator('comments')(<TextArea rows={4} />)}</Form.Item>
      </Form>
    );
  }
}
